<template>
	<view class="search">
		<view class="nav-content">
			<icon class="search" type="search" @click="getSearchSomething(1)" size="15" />
			<input type="text" confirm-type="search" @confirm="getSearchSomething(1)" v-model.trim="keyword" placeholder="请输入搜索的关键词" />
			<icon class="close" v-if="keyword" type="clear" @click="keyword=''" size="15" />
		</view>
		<template v-if="!keyword">
			<view class="defauilt">
				<view class="hotSearch">热搜</view>
				<view class="hotContent">
					<view class="hotItem" v-for="(item,index) in historyData.recommend_keyword" :key="index" @click="getItem(item)">
						{{item}}
					</view>
				</view>
				<view class="history">搜索历史</view>
				<view class="historyContent">
					<view class="hotItem" v-for="(item,index) in historyData.my_history" :key="index"  @click="getItem(item)">
						{{item}}
					</view>
				</view>
				<view class="delete" @click="delMyKeywordRecord()">
					<image class="del" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/delete.png" mode=""></image>
					<text class="list">清除记录</text>
				</view>
			</view>
		</template>

		<!-- 搜索结果 -->
		<van-tabs style="height: 100vh;" v-model="active" v-if="searchData && keyword">
			<van-tab title="企业">
				<view class="enterprise" v-if="searchData && keyword">
					<view class="null" style="color: #555555;" v-if="searchData.length==0">
						暂无数据~~
					</view>
					<view class="enterprose-item" v-for="(item,index) in searchData" :key="index" @click="toEnterpriseDetail(item)">
						<image class="imglogo" :src="item.img_url"></image>
						<view class="enterprise-item-desc">
							<view class="enterprise-item-desc-name">
								{{item.name}}
							</view>
							<view class="icon">
								<view class="left" v-if="item.province && item.city ">
									{{item.province}}{{item.city}}
								</view>
								<view class="left" v-else>
									暂无地址
								</view>
								<view class="right">
									<view class="num">{{item.like_num}}</view>
									<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/liked.png" v-if="item.is_already_like==1"
									 mode="widthFix" @click.stop="sendLike(item.id,item.type)"></image>
									<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/hand.png" v-else mode="widthFix"
									 @click.stop="sendLike(item.id,index)"></image>
								</view>
							</view>
						</view>
						<!-- 统计 -->
						<view class="total" v-if="total.company_total>0">
							<text>{{searchData.length}}</text>/<text>{{total.company_total}}</text>
						</view>
					</view>
				</view>
			</van-tab>
			<!-- 搜索到的人物 -->
			<van-tab title="人物">
				<view class="enterprise" v-if="personData && keyword">
					<view class="null" style="color: #555555;" v-if="personData.length==0">
						暂无数据~~
					</view>
					<view class="enterprose-item" v-for="(item,index) in personData" :key="index" @click="toPersonDetail(item)">
						<image class="imglogo" :src="item.img_url"></image>
						<view class="enterprise-item-desc">
							<view class="enterprise-item-desc-name">
								{{item.name}}
							</view>
							<view class="icon">
								<view class="left" v-if="item.province && item.city ">
									{{item.province}}{{item.city}}
								</view>
								<view class="left" v-else>
									暂无地址
								</view>
								<view class="right">
									<view class="num">{{item.like_num}}</view>
									<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/liked.png" v-if="item.is_already_like==1"
									 mode="widthFix" @click.stop="sendLike(item.id,item.type)"></image>
									<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/hand.png" v-else mode="widthFix"
									 @click.stop="sendLike(item.id,index)"></image>
								</view>
							</view>
						</view>
					</view>
					<!-- 统计 -->
					<view class="total" v-if="total.character_total>0">
						<text>{{personData.length}}</text>/<text>{{total.character_total}}</text>
					</view>
				</view>
			</van-tab>
		</van-tabs>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchData: '',
				personData: '',
				keyword: '',
				page: 1,
				limit: 6,
				historyData: '',
				active: 0,
				total: ''
			}
		},
		onLoad(){
			this.getSearchSomething();
		},
		onShow() {
			this.getSearchHistory();
		},
		watch: {
			keyword(newValue, oldValue) {
				if (newValue == '') {
					this.getSearchHistory();
				}
			},
		},
		methods: {
			getItem(item) {
				this.keyword = item;
				this.getSearchSomething();
			},
			// 获取搜索结果
			async getSearchSomething(page) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.page = page || this.page
				let param = {
					keyword: this.keyword,
					page: this.page,
					limit: this.limit,
					user_token: uni.getStorageSync('userToken')
				}
				let res = await this.$api.getSearchSomething(param);
				if (res.data.level == 'success') {
					if (this.page == 1) {
						this.searchData = res.data.data.company;
						this.personData = res.data.data.character;
					} else {
						this.searchData = this.searchData.concat(res.data.data.company);
						this.personData = this.personData.concat(res.data.data.character);
					}
					this.total = res.data.page_info;
				}
				uni.hideLoading()
			},
			// 获取搜索记录
			async getSearchHistory() {
				const param = {
					user_token: uni.getStorageSync('userToken'),
				}
				let res = await this.$api.getSearchHistory(param);
				if (res.data.level == 'success') {
					this.historyData = res.data.data
				}
			},

			// 删除记录
			async delMyKeywordRecord() {

				const param = {
					user_token: uni.getStorageSync('userToken'),
				}
				let res = await this.$api.delMyKeywordRecord(param);
				if (res.data.level == 'success') {
					uni.showToast({
						title: '已清空！',
						duration: 2000
					})
					this.getSearchHistory()
				}
			},

			async sendLike(id, index) {
				//获取点赞
				let param = {
					company_id: id,
					user_token: uni.getStorageSync('userToken')
				}
				// console.log('param',param)
				let res = await this.$api.sendLike(param)
				if (res.data.level == 'success') {
					uni.showToast({
						icon: 'success',
						title: res.data.message,
						duration: 1500
					});
					let str = this.brandData;
					str[index].is_already_like = 1;
					str[index].like_num++;
					this.brandData = [];
					this.brandData = str;
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.message,
						duration: 1500
					})
				}
			},

			toEnterpriseDetail(item) {
				//跳转企业详细
				uni.navigateTo({
					url: `/pages/companyDetail/index?companyId=${item.id}`
				})
			},
			toPersonDetail(item) {
				//跳转人物详情
				uni.navigateTo({
					url: `/pages/personDetail/index?personId=${item.id}`
				})
			}
		},
		onReachBottom() {
			if (this.page < Math.ceil(this.total.company_total / this.total.limit)) {
				this.page++;
				this.getSearchSomething();
			} else {
				uni.showToast({
					icon: 'none',
					title: '已经到底~'
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	@import '../../common/scss/common.scss';
	.nav-content {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		position: relative;

		.search {
			position: absolute;
			top: 40rpx;
			left: 30rpx;
			z-index: 100;
		}

		.close {
			position: absolute;
			top: 40rpx;
			right: 30rpx;
			z-index: 100;
			padding-left: 50rpx;
		}
	}

	.hotContent,
	.historyContent {
		width: 100%;
		overflow: hidden;
		padding: 20rpx 0;
	}

	.defauilt {
		padding: 20rpx;
	}

	.hotSearch,
	.history {
		font-size: 30rpx;
	}

	.hotItem {
		float: left;
		padding: 10rpx 20rpx;
		border: 1px solid #ccc;
		margin: 20rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
	}

	input {
		font-size: 30rpx;
		padding: 10rpx 50rpx;
		background: #ccc;
		color: #EDEDED;
		border-radius: 10rpx;
	}

	.delete {
		float: right;
		width: 200rpx;
		text-align: center;
		border: 1rpx solid #ccc;
		padding: 10rpx 0;
		border-radius: 10rpx;
	}

	.del {
		width: 56rpx;
		height: 56rpx;
		vertical-align: middle;
	}

	.list {
		font-size: 30rpx;
	}

	.enterprise {
		overflow: hidden;
		background: #EDEDED;
		padding: 25rpx;
		min-height: calc(100vh - 150px);
	}

	.enterprose-item {
		width: calc((100vw - 85rpx)/2);
		float: left;
		border-radius: 20rpx;
		overflow: hidden;
		height: 500rpx;
		background: #fff;
		position: relative;

		&:nth-child(even) {
			margin: 0 0 30rpx 30rpx;
		}
	}

	.enterprise-item-desc {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		height: calc(100% - 360rpx);
		padding: 30rpx 0;
	}

	.icon {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 40rpx;
		padding: 0 20rpx;
		width: calc(100% - 40rpx);

		.left {
			max-width: 60%;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			color: #555555;
			@include ellipsis(1)
		}

		.right {
			margin-left: auto;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
		}
	}

	.icon image {
		width: 30rpx;
		height: 30rpx;
	}

	.num {
		position: absolute;
		right: 60rpx;
		font-size: 30rpx;
		color: #666;
	}

	.imglogo {
		width: 100%;
		height: 300rpx;
	}

	.enterprise-item-desc-name {
		font-weight: 600;
		width: 100%;
		font-size: 36rpx;
		text-indent: 30rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.total {
		position: fixed;
		bottom: 50rpx;
		right: 40%;
		margin: 0 auto;
		width: 150rpx;
		background: #fff;
		border-radius: 5rpx;
		padding: 10rpx;
		border: 1rpx solid #ccc;
		font-size: 30rpx;
		text-align: center;
	}
</style>
